<template>
    <div class="top">
        <!-- 顶部组件 -->
        <div class="left">
            <span class="leftButton" @click="goToHomePage">首页</span>
        </div>
        <div class="center">
            <div class="title">智慧旅游可视化大数据展示平台</div>
        </div>
        <div class="right">
            <span class="rightButton">统计报告</span>
            <!-- <span class="currentTime">当前时间：2025年3月22日17:31</span> -->
             <!-- 使用插件“moment”来获取时间，并设置定时器，通过每秒执行一次函数来动态地获取最新时间↓ -->
            <span class="currentTime">当前时间：{{ currentTime }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup name="Top">
import {ref,onMounted,onBeforeUnmount} from 'vue'
import moment from 'moment'
// 导入并获取“路由器对象”↓
import { useRouter } from 'vue-router'
let router = useRouter()
let currentTime = ref(moment().format('YYYY年MM月DD日HH:mm:ss')) // 初始化时间变量（注：此处小时必须在用大写的H的情况下才能显示24小时制）
let timer = ref(0) // 初始化定时器变量
// 在组件挂载完毕时就设置定时器，开始实时更新时间↓
onMounted(() => {
    timer.value = setInterval(() => {
        currentTime.value = moment().format('YYYY年MM月DD日HH:mm:ss')
    },1000)
})
onBeforeUnmount(() => {
    clearInterval(timer.value) // 在组件卸载前清除定时器，防止内存泄漏
})
/**
 * 函数“goToHomePage”被用于“跳转到首页”
 */
function goToHomePage() {
    router.push('/home')
}
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 40px;
    display: flex;

    .left {
        flex: 1.5;
        background: url(../../images/dataScreen-header-left-bg.png)no-repeat;
        background-size: cover;
        .leftButton{
            width: 150px;
            height: 40px;
            background: url(../../images/dataScreen-header-btn-bg-l.png)no-repeat;
            // background-size: cover;
            // 在CSS中，background-size属性用于设置背景图片的尺寸，可以接受一个或两个值。当提供两个值时，第一个值设置背景的宽度，第二个值设置背景的高度↓
            background-size: 100% 100%;
            float: right;
            text-align: center;
            line-height: 40px;
            color: #29fcff;
            font-size: 20px;
        }
    }
    
    .right {
        flex: 1.5;
        background: url(../../images/dataScreen-header-right-bg.png)no-repeat;
        background-size: cover;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .rightButton{
            width: 150px;
            height: 40px;
            background: url(../../images/dataScreen-header-btn-bg-r.png)no-repeat;
            background-size: 100% 100%;
            // float: left;
            text-align: center;
            line-height: 40px;
            color: #29fcff;
            font-size: 20px;
        }
        .currentTime{
            color: #29fcff;
            font-size: 20px;
            // margin-right: 10px;
        }
    }

    .center {
        flex: 2;
        .title{
            width: 100%;
            height: 74px;
            background: url(../../images/dataScreen-header-center-bg.png)no-repeat;
            text-align: center;
            color: #29fcff;
            line-height: 74px;
            font-size: 30px;
        }
    }
}
</style>